<template>
  <el-dialog
      :model-value="visible"
      title="文件上传"
      :width="`${width}%`"
      align-center
      :before-close="beforeClose"
  >
    <el-upload
        drag
        ref="uploadFile"
        name="file"
        v-loading="isLoading"
        :file-list="state.fileList"
        :show-file-list="false"
        :multiple="false"
        :limit="limit"
        :auto-upload="true"
        :http-request="uploadAction"
    >
      <el-icon class="el-icon--upload">
        <upload-filled/>
      </el-icon>
      <div class="el-upload__text">
        拖动文件到此处或 <em>点击上传</em>
      </div>
      <template #tip>
        <div class="el-upload__tip">
          在此提示文件可以上传的最大size或者格式
        </div>
      </template>
    </el-upload>
  </el-dialog>
</template>

<script lang="ts" setup name='CustomUpload'>
import {reactive} from 'vue'
import {UploadFile, UploadFiles} from "element-plus";

let props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  isLoading: {
    type: Boolean,
    default: false
  },
  //对话框宽度
  width: {
    type: Number,
    default: 50
  },
  //上传文件数量限制
  limit: {
    type: Number,
    default: 1
  },
  //上传文件类型
  fileType: {
    type: Array,
    default: ['image/jpeg', 'image/jpg', 'image/png']
  },
  //上传文件报错文件类型提示
  fileTypeMsg: {
    type: Array,
    default: ['jpeg', 'jpg', 'png']
  },
  fileSize: {
    type: Number,
    //单位MB
    default: 1
  }
});
const state = reactive({
  fileList: []
})
let emits = defineEmits<{
  (event: 'update:visible', newVal: boolean): void
  (event: 'uploadApi', file: File): void
}>();

const uploadFile = ref();

const uploadAction = (option: any) => {
  emits('uploadApi', option.file)
  uploadFile.value.clearFiles()
}

const beforeClose = (done: () => void) => {
  emits('update:visible', false)
}
</script>

<style scoped lang='less'>

</style>
